let qId = (x) => document.getElementById(x)
const video = qId('video')
const play = qId('play')
const stop = qId('stop')
const progress = qId('progress')
const timestamp = qId('timestamp')
const playIcon = play.querySelector('i')


let updatePlayIcon = () => {
    if (video.paused) {
        video.play()
        playIcon.classList.remove('fa-pause')
        playIcon.classList.add('fa-play')
    } else {
        video.pause()
        playIcon.classList.remove('fa-play')
        playIcon.classList.add('fa-pause')
    }
}
video.addEventListener('click', updatePlayIcon)
playIcon.addEventListener('click', updatePlayIcon)
stop.addEventListener('click', () => {
    video.currentTime = 0
    video.pause()
})
video.addEventListener('timeupdate', () => {
    progress.value = (video.currentTime / video.duration) * 100
    let mins = Math.floor(video.currentTime / 60).toString().padStart(2, "0")
    let sec = Math.floor(video.currentTime % 60).toString().padStart(2, "0")
    timestamp.innerText = `${mins}:${sec}`
})
progress.addEventListener('change', () => {
    video.currentTime = (progress.value * video.duration) / 100
    video.play()
})

